
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_3063772_jj0wi0bri1.css">
  <style>
    body {
      margin: 0;
    }

    .header {
      height: 196px;
      /* background-color: #999; */
    }

    .hTop {
      height: 36px;
      background-color: #333333;
      display: flex;
      padding: 0 200px;
    }

    .hTopLeft {
      color: #d29953;
      width: 420px;
      text-align: center;
      line-height: 36px;
    }

    .hTopRight {
      color: rgb(180, 178, 178);
    }

    .hTopRight>ul {
      display: flex;
      list-style: none;
      margin: 0;
      line-height: 36px;
      font-family: "微软雅黑";
    }

    .hTopRight>ul>li {
      text-align: center;
      padding: 0 20px 0 0;
      font-size: 12px;
      
    }

    .hTopRight>ul>li:hover {
      color: white;
      
    }

    .hBottom {
      width: 75%;
      margin: 0 auto;
      height: 200px;
    }

    .hbTop {
      height: 60px;
      margin-top: 38px;
      display: flex;
    }

    .hbTop>div:nth-child(2) {
      width: 572px;
      margin-left: 160px;
    }

    .hbTop input {
      box-sizing: border-box;
      width: 442px;
      height: 40px;
      padding: 2px 0 2px 38px;
      border: 1px solid #d29953;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-image: url('./images/2.png');
      background-size: 14px 14px;
      background-repeat: no-repeat;
      background-position: 13px 13px;
    }

    .hbTop button {
      box-sizing: border-box;
      width: 90px;
      height: 40px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      background-color: #d29953;
      color: white;
      border: none;
    }

    .hbTop>div:nth-child(3)>div {
      width: 132px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      box-sizing: 20px;
      border-radius: 20px;
      border: 1px solid #d29953;
      color: #d29953;
    }
          
    .hbbTop ul{
        float: left;
        margin-top: 10px;
        line-height: 1;
        font-weight: 700;
        height: 30px;
        position: relative;
        width: 100%;
        list-style: none;
        display: flex; 
        margin-left: 10px;
    }
    .hbbTop ul li{
      position: relative;
      z-index: 2;
      display: block;
      padding-bottom: 7px;
      color: #000;
      margin-left: 20px;
    }
    .hbbTop ul li:hover{
      color: #d29953;
      border-bottom: 3px solid #d29953;
    }

    .hhbtop{
        color: #ccc;
        padding-left: 380px;
    }

    .hhbtop>ul {
      display: flex;
      list-style: none;
      margin: 0;
      font-family: "微软雅黑";
      height: 18px;
      line-height: 18px;
    }

    .hhbtop>ul>li {
      text-align: center;
      padding: 0 10px 0 0;
      font-size: 12px;
    }

    .hhbtop>ul>li:hover {
      color: #d29953;
    }
}

    .content {
      height: calc(100vh - 476px);
      background: cornflowerblue;
    }

    .footer {
      height: 300px;
      padding-top: 20px;
      background: #333;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="hTop">
      <div class="hTopLeft">
        <i class="iconfont icon-laba"></i>
        <span>因疫情影响，部分地区无法配送公告</span>
      </div>
      <div class="hTopRight">
        <ul>
          <li>登录/注册 |</li>
          <li>我的订单 |</li>
          <li>会员 |</li>
          <li>甄选家 |</li>
          <li>企业采购 |</li>
          <li>客户服务 |</li>
          <li><i class="iconfont icon-shouji"></i> APP</li>
        </ul>
      </div>
    </div>
    <div class="hBottom">
      <div class="hbTop">
        <div>
          <img src="./images/1.jpg" alt="图片丢失" height="60px">
        </div>
        <div>
          <input type="text" placeholder="请输入您喜欢的商品"><button>搜索</button>
        </div>
        <div>
          <div>
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车 0</span>
          </div>
        </div>
      </div>
      <div class="hhbtop">
        <ul>
          <li>过新年送好礼 |</li>
          <li>耳机 |</li>
          <li>睡衣 |</li>
          <li>牛奶 |</li>
          <li>收纳 |</li>
          <li>水杯 |</li>
          <li>猫粮 |</li>
          <li>行李箱</li>
        </ul>
      </div>
      <div class="hbbTop">
        <ul>
        <li>首页</li>
        <li>居家生活</li>
        <li>服饰鞋包</li>
        <li>美食酒水</li>
        <li>个护清洁</li>
        <li>母婴亲子</li>
        <li>运动旅行</li>
        <li>数码家电</li>
        <li>严选全球</li>
        <li> 为你严选</li>
        <li>众筹</li>
      </ul></div>
      
    </div>
      <div class="hbBottom"></div>
    </div>
  </div>
  <div class="content"></div>
  <div class="footer"></div>
</body>

</html>